<script setup>
import { ref, defineOptions } from 'vue'
import { limitFree } from '@/api/getAxios'

// 限时免费
const time = ref('')
const limitfree = ref([])
limitFree().then((res) => {
    // console.log(res);
    limitfree.value = res.data.data.story
    // 限时时间
    time.value = res.data.data.countdownTime
    // console.log(limitfree._rawValue);
})

// const clickHanlder = () => {
//     console.log(111);
// }

// 限时时间
// const convertSecondsToTimeFormat = (totalSeconds) => {
//     const hours = Math.floor(totalSeconds / 3600);
//     const minutes = Math.floor((totalSeconds % 3600) / 60);
//     const seconds = totalSeconds % 60;
//     const timeFormat = [hours, minutes, seconds].map(formatTime).join(':');
//     return timeFormat;
// }
// const formatTime = (value) => {
//     return value < 10 ? '0' + value : value;
// }
// let timeFormat = convertSecondsToTimeFormat(time.value);
// console.log(timeFormat);

</script>
<template>
    <div class="limit-free" v-if="limitfree._rawValue
        == []">
        <h1 class="recommend">
            <span class="time">{{ time }}</span>
            <span>限时免费</span>
            <span class="iconfont icon-tiaozhuan jump" @click="clickHanlder"></span>
        </h1>
        <ul>
            <li v-for="item in limitfree">
                <img :src="item.smallCover" alt="">
                <p>{{ item.name }}</p>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
@import "//at.alicdn.com/t/c/font_4308477_noa7bemp4hd.css";

.limit-free {
    height: 80vw;
    background-color: #fff;
    margin-bottom: 15px;

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        padding: 20px 0px;
        position: relative;

        span.jump {
            position: absolute;
            right: 0;
            font-size: 26px;
            margin-right: 20px;
        }

        span.time {
            position: absolute;
            left: 0;
            font-size: 14px;
            color: #dc727d;
        }
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 28vw;
            height: 37vw;
            margin: 30px 10px;
            border-radius: 10px;
            box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);

            img {
                border-radius: 10px;
                width: 100%;
                height: 100%;
            }

            p {
                display: -webkit-box;
                text-align: center;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        }
    }
}
</style>